<!-- 确认订单 -->
<template>
	<view class="order-wrap">
		<!-- 地址栏 -->
		<view class="head_box"
			v-if="orderPre.need_address"
			@tap="jump('/pages/user/address/list', { from: 'order' })">
			<view class="add-address-box u-flex u-flex-1"
				v-if="!addressId">
				<view class="box-bg u-p-30 u-flex-1 u-flex u-row-between">
					<text class="select-notice">请选择收货地址</text>
					<text class="u-iconfont uicon-arrow-right"
						style="color: #bfbfbf"></text>
				</view>
			</view>
			<view class="add-address-box u-p-30"
				v-else>
				<view class="top u-flex">
					<text class="name">{{ addressData.consignee }}</text>
					<text class="phone">{{ addressData.phone }}</text>
					<text class="tag"
						v-show="addressData.is_default == 1">默认</text>
				</view>
				<view class="detail u-flex u-row-between">
					<view class="address">
						{{ addressData.province_name }}{{ addressData.city_name
            }}{{ addressData.area_name }}{{ addressData.address }}
					</view>
					<text class="u-iconfont uicon-arrow-right"
						style="color: #bfbfbf"></text>
				</view>
			</view>
		</view>
		<view class="u-m-b-10">
			<!-- 确认订单商品卡片 -->
			<view class="goods-list"
				v-for="g in perGoodsList"
				:key="g.sku_price_id">
				<view class="goods-card u-p-30">
					<shopro-mini-card :title="g.detail.title"
						:image="g.detail.image">
						<template #describe>
							<view class="order-sku u-ellipsis-1">
								<text class="order-num">
									{{ g.detail.current_sku_price &&
                    g.detail.current_sku_price.goods_sku_text
                      ? g.detail.current_sku_price.goods_sku_text
                      : ""
                  }}
								</text>
							</view>
						</template>
						<template #cardBottom>
							<view class="goods-price u-flex u-row-between">
								<view class="">
									<text
										v-show="orderType === 'score'">{{ g.detail.current_sku_price.score }}积分+</text>
									<text>￥{{ g.detail.current_sku_price.price }}</text>
								</view>
								<text class="goods-num">x{{ g.goods_num }}</text>
							</view>
						</template>
					</shopro-mini-card>
				</view>
				<!-- 配送方式 -->
				<!-- <view class="logistic item-list u-flex u-row-between"
					@tap="onSelExpressType(g)">
					<view class="item-title">配送方式</view>
					<view class="u-flex">
						<view class="detail">{{ getCurGoodsExpress(g) }}</view>
						<text class="u-iconfont uicon-arrow-right"
							style="color: #bfbfbf"></text>
					</view>
				</view> -->
			</view>
			<block v-if="perGoodsList.length">
				<view class="bg-white"
					style="margin-top: 20rpx;"
					v-if="is_phone || is_name">
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;">
						<view class="item-title text-bold">基本信息</view>
					</view>
					<!-- 姓名 -->
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;"
						v-if="is_name">
						<view class="item-title">姓名</view>
						<input class="item-input"
							placeholder-class="input-pl"
							type="text"
							v-model="realname"
							placeholder="请填写姓名" />
					</view>
					<!-- 联系电话 -->
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;"
						v-if="is_phone">
						<view class="item-title">联系电话</view>
						<input class="item-input"
							placeholder-class="input-pl"
							type="text"
							v-model="phone"
							placeholder="请填写联系电话" />
					</view>
					<!-- 宿舍号 -->
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;"
						v-if="is_hostel">
						<view class="item-title">宿舍号</view>
						<view class="u-flex u-flex-1">
							<input class="item-input"
								placeholder-class="input-pl"
								type="text"
								v-model="floor"
								placeholder="请填写楼层信息" />
							<view class="u-m-l-20">栋</view>
							<input class="item-input"
								placeholder-class="input-pl"
								type="text"
								v-model="room"
								placeholder="请填写具体房号" />
							<view class="u-m-l-20">号</view>
						</view>
					</view>
					<!-- 备注 -->
					<!-- <view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;">
						<view class="item-title">备注</view>
						<input class="item-input"
							placeholder-class="input-pl"
							type="text"
							v-model="remark"
							placeholder="建议留言前先于卖家沟通确认" />
					</view> -->
				</view>
				<view class="bg-white"
					style="margin-top: 20rpx;"
					v-if="is_mobile">
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;">
						<view class="item-title text-bold">商品信息</view>
					</view>
					<!-- 号码归属地 -->
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;">
						<view class="item-title">号码归属地</view>
						<view class="u-flex u-flex-1 u-row-right u-col-cetner">
							<picker :range="areaList"
								range-key="name"
								@change="areaChange">
								<view class="u-flex">
									<view>
										<view v-if="areaCurrent >= 0">
											{{areaList[areaCurrent].name}}
										</view>
										<view style="color: #c4c4c4;"
											v-else>请选择号码归属地</view>
									</view>
									<view class="u-m-l-10"
										style="margin-top: 4rpx;">
										<uni-icons type="right"
											color="#8a8a8a"></uni-icons>
									</view>
								</view>
							</picker>
						</view>
					</view>
					<!-- 号码归属地 -->
					<view class="remark-box u-flex item-list u-p-30"
						style="margin-top: 0;">
						<view class="item-title">号码</view>
						<view class="u-flex u-flex-1 u-row-right u-col-cetner">
							<picker :range="numberList"
								range-key="number"
								@change="numberChange">
								<view class="u-flex">
									<view>
										<view v-if="numberCurrent >= 0">
											{{numberList[numberCurrent].number}}
										</view>
										<view style="color: #c4c4c4;"
											v-else>请选择号码</view>
									</view>
									<view class="u-m-l-10"
										style="margin-top: 4rpx;">
										<uni-icons type="right"
											color="#8a8a8a"></uni-icons>
									</view>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="remark-box u-flex item-list u-p-30"
					style="margin-top: 20rpx;background: unset;line-height: 50rpx;color: orangered;"> 
					<u-parse :html="orderPre.rule_text"></u-parse>
				</view>
				<!-- 选择优惠券 -->+
				<sh-select-coupon v-if="hasCoupons"
					:couponList="couponList"
					@change="selectCoupon"></sh-select-coupon>
				<!-- 积分 -->
				<view class="score item-list u-flex u-row-between"
					v-show="orderType === 'score'">
					<view class="u-flex"><text class="item-title">积分</text></view>
					<view class="price">-{{ orderPre.score_amount || 0 }}积分</view>
				</view>
				<!-- 金额明细 -->
				<!-- <view class="u-flex u-row-between item-list border-top u-m-b-10">
					<view class="item-title">商品金额</view>
					<view class="u-flex">
						<text class="price">￥{{ orderPre.goods_amount || "0.00" }}</text>
					</view>
				</view> -->
				<!-- 活动优惠 -->
				<u-collapse v-if="
            orderPre.activity_discount_infos &&
            orderPre.activity_discount_infos.length &&
            Number(orderPre.activity_discount_money)
          "
					event-type="close"
					:arrow="true"
					:accordion="true"
					arrowColor="#bfbfbf"
					:head-style="{ background: '#fff', height: '100rpx' }">
					<u-collapse-item>
						<block slot="title">
							<view style="width: 680rpx; padding-right: 0"
								class="u-flex u-row-between item-list">
								<view class="item-title">活动优惠</view>
								<view class="u-flex">
									<text class="price"
										style="margin-right: 0">-￥{{ orderPre.activity_discount_money || "0.00" }}</text>
								</view>
							</view>
						</block>
						<view class=""
							v-for="item in orderPre.activity_discount_infos"
							:key="item.activity_id">
							<view class="u-flex u-row-between item-list"
								v-if="item.activity_type !== 'free_shipping'">
								<view class="item-title">{{ item.activity_title }}</view>
								<view class="u-flex">
									<text class="price"
										style="color: #666">-￥{{ item.activity_discount_money || "0.00" }}</text>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
				<!-- 价格 -->
				<!-- <view class="price-box u-flex u-row-between item-list">
					<view class="item-title u-flex u-col-center">
						<view class="u-m-r-10">运费</view>
						<view class="activity-title"
							v-if="Number(orderPre.dispatch_discount_money) > 0">活动减￥
							{{ orderPre.dispatch_discount_money }}</view>
					</view>
					<view class="u-flex">
						<text class="origin-price u-m-r-10"
							v-if="Number(orderPre.dispatch_discount_money) > 0">-￥{{ orderPre.dispatch_amount }}</text>
						<text class="price">￥{{ Number(orderPre.dispatch_amount) -
                  Number(orderPre.dispatch_discount_money) || "0.00"
              }}</text>
					</view>
				</view> -->
				<!-- 发票 -->
				<view v-if="orderPre && Number(orderPre.invoice_amount)"
					class="u-flex u-row-between item-list u-p-20 border-top">
					<view class="item-title">申请发票</view>
					<view class="u-flex u-col-center"
						@tap="onInvoice">
						<text class="selected-invoice"
							style="font-size: 28rpx; color: #c4c4c4">{{ selectedInvoice }}</text>
						<text class="u-iconfont uicon-arrow-right"
							style="color: #bfbfbf"></text>
					</view>
				</view>
			</block>
		</view>
		<!-- 底部 -->
		<view class="foot-box-wrap">
			<view class="foot-box u-flex u-row-between safe-area-inset-bottom">
				<view class="u-flex">
					<text class="num">共{{ totalNum }}件</text>
					<view class="all-money">
						<text>合计：</text>
						<text class="price">￥{{ orderPre.total_fee || "0.00" }}</text>
					</view>
				</view>
				<button class="cu-btn sub-btn"
					@tap="subOrder"
					:disabled="isDisabled"
					hover-class="btn-hover"> 提交订单 </button>
			</view>
		</view>
		<!-- 发票弹窗 -->
		<u-popup v-model="showInvoice"
			@close="showInvoice = false"
			safe-area-inset-bottom
			mode="bottom"
			:closeable="false"
			border-radius="20">
			<view class="invoice-modal page_box">
				<view class="invoice-head u-flex u-col-center">
					<view class="head-nav u-flex u-col-center u-row-center"
						@tap="changeInvoiceType('person')">
						<text class="nav-title"
							:class="{ 'nav-title--active': invoiceType === 'person' }">个人</text>
						<view v-show="invoiceType === 'person'"
							class="head-nav--active"></view>
					</view>
					<view class="head-nav u-flex u-col-center u-row-center"
						@tap="changeInvoiceType('company')">
						<text class="nav-title"
							:class="{ 'nav-title--active': invoiceType === 'company' }">企/事业单位</text>
						<view v-show="invoiceType === 'company'"
							class="head-nav--active"></view>
					</view>
				</view>
				<view class="invoice-content content_box">
					<u-form :labelStyle="{
              'font-size': '28rpx',
              'font-weight': '600',
              color: '#595959',
              'padding-left': '20rpx',
            }"
						label-position="left"
						:model="invoiceForm.model"
						:rules="invoiceForm.rules"
						ref="invoiceRef"
						:errorType="['toast']">
						<u-form-item class="u-p-r-20"
							label-width="150"
							label="名称:"
							prop="header_name">
							<u-input placeholder="请填写名称"
								v-model="invoiceForm.model.header_name"
								type="text"></u-input>
						</u-form-item>
						<u-form-item class="u-p-r-20"
							v-if="invoiceType === 'company'"
							label-width="220"
							label="纳税人识别号:"
							prop="tax_no">
							<u-input placeholder="请输入纳税人识别号"
								v-model="invoiceForm.model.tax_no"
								type="text"></u-input>
						</u-form-item>
						<u-form-item class="u-p-r-20"
							label-width="150"
							label="手机号:"
							prop="mobile">
							<u-input placeholder="请输入填写手机号"
								v-model="invoiceForm.model.mobile"
								type="number"></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view class="invoice-foot">
					<view class="invoite-price u-flex u-col-center u-row-center u-m-b-40">
						<text class="price-title">可开票金额：</text>
						<text class="price-num">{{ orderPre.invoice_amount }}元</text>
					</view>
					<view class="u-flex u-col-center u-row-around u-p-b-30">
						<button class="cancel-btn u-reset-button"
							@tap="cancelInvoice"> 取消 </button>
						<button class="save-btn u-reset-button"
							@tap="saveInvoice"> 确定 </button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 配送方式弹窗 -->
		<u-popup v-model="showExpressType"
			@close="showExpressType = false"
			safe-area-inset-bottom
			mode="bottom"
			:closeable="false"
			border-radius="20">
			<!-- 配送方式tab-->
			<view class="express-type page_box">
				<view class="express-type__head head-box u-flex u-col-center">
					<view class="express-type__head-nav u-flex u-col-center u-row-center"
						v-for="(nav, index) in expressType"
						:key="nav.id"
						@tap="changeExpressType(nav.value)"
						v-if="inExpressType.includes(nav.value)">
						<text class="head-nav__title"
							:class="{
                'head-nav__title--active': expressTypeCur === nav.value,
              }">{{ nav.title }}</text>
						<view :class="expressClass"
							v-show="expressTypeCur === nav.value"></view>
					</view>
				</view>
				<view class="express-type__content content_box">
					<!-- 快递 -->
					<!-- 空 -->
					<view class="empty-address u-flex u-col-center"
						v-if="
              !addressId &&
              expressTypeCur !== 'selfetch' &&
              expressTypeCur !== 'autosend'
            "
						@tap="jump('/pages/user/address/list', { from: 'order' })"> 请选择收货地址 <text
							class="u-iconfont uicon-arrow-right"
							style="color: #999"></text>
					</view>
					<!-- 地址 -->
					<view class="express-address"
						v-if="expressTypeCur == 'express' && addressId">
						<view class="express-top u-flex u-row-between"
							@tap="jump('/pages/user/address/list', { from: 'order' })">
							<view class="u-flex">
								<text class="tag"
									style="white-space: nowrap"
									v-show="addressData.is_default == 1">默认</text>
								<text class="address">{{ addressData.province_name }}{{ addressData.city_name
                  }}{{ addressData.area_name }}{{ addressData.address }}</text>
								<view class="address-guide"><text class="u-iconfont uicon-arrow-right"
										style="color: #bfbfbf"></text></view>
							</view>
							<view class="address-location u-flex-col u-col-center">
								<image class="location-img"
									:src="$IMG_URL + '/imgs/order/e0.png'"
									mode=""></image>
								<text class="location-text">物流快递</text>
							</view>
						</view>
						<view class="express-content">
							<view class="phone-box1">
								<text class="name">{{ addressData.consignee }}</text>
								<text class="phone">{{ addressData.phone }}</text>
							</view>
						</view>
					</view>
					<!-- 自提  -->
					<view class="express-address"
						v-if="expressTypeCur == 'selfetch'">
						<!-- 定位 -->
						<view class="u-flex-col u-col-center location-box"
							v-if="!lat">
							<image class="nolocation-img"
								:src="$IMG_URL + '/imgs/order/location.png'"
								mode=""></image>
							<text class="location-title">开启定位服务</text>
							<text class="location-tip">为你推荐更精准的位置信息噢~</text>
							<button class="u-reset-button open-location"
								@tap="getLocation"> 去开启 </button>
						</view>
						<!-- 已定位 -->
						<view class=""
							v-else>
							<view class="express-top u-flex u-col-center u-row-between"
								@tap="
                  jump('/pages/order/express/store-address', {
                    goodsId: currentGoodsId,
                    lat: lat,
                    lng: lng,
                    storeId: storeInfo ? storeInfo.id : 0,
                  })
                ">
								<view class="u-flex">
									<text class="tag1"
										v-if="addressData.is_default == 1">最近</text>
									<text class="address">{{ storeInfo ? storeInfo.name : "暂无自提点"
                  }}</text>
									<text class="u-iconfont uicon-arrow-right"
										style="color: #999"></text>
								</view>
								<view class="address-location u-flex-col u-col-center">
									<image class="location-img"
										:src="$IMG_URL + '/imgs/order/e1.png'"
										mode=""></image>
									<view class="location-text">距您{{ storeInfo ? storeInfo.distance_text : 0 }}</view>
								</view>
							</view>
							<view class="express-content u-flex u-col-cetner">
								<view class="time-box">
									<view class="box-title u-m-b-20">到店时间</view>
									<view class="box-content u-flex u-col-center"
										@tap="checkExpressTime('selfetch')">
										<text class="box-text">{{ checkTime[checkDayCur].title
                      }}{{ checkTime[checkDayCur].timeRange[checkTimeCur]
                      }}</text>
										<text class="u-iconfont uicon-arrow-right"
											style="color: #999"></text>
									</view>
								</view>
								<view class="box-line"></view>
								<view class="phone-box">
									<view class="box-title u-m-b-20">预留电话</view>
									<view class="box-content u-flex"
										style="width: 340rpx">
										<u-input placeholder="请输入预留电话"
											placeholderStyle="font-size:24rpx"
											border
											height="40"
											:focus="getFocus"
											v-model="selfPhone"
											type="number"></u-input>
									</view>
								</view>
							</view>
							<view class="express-bottom"
								@tap="checkProtocol">
								<u-checkbox active-color="#f0c785"
									:value="isProtocol">
									<view class="protocol"> 同意并接受 <text class="protocol-text"
											@tap.stop="
                        jump('/pages/public/richtext', {
                          id: initStore.selfetch_protocol,
                        })
                      ">《到店自提服务协议》</text>
									</view>
								</u-checkbox>
							</view>
						</view>
					</view>
					<!-- 商家配送 -->
					<view class="express-address"
						v-if="expressTypeCur == 'store' && addressId">
						<view class="express-top u-flex u-row-between"
							@tap="jump('/pages/user/address/list', { from: 'order' })">
							<view class="">
								<text class="tag"
									v-if="addressData.is_default == 1">默认</text>
								<text class="address">{{ addressData.province_name }}{{ addressData.city_name
                  }}{{ addressData.area_name }}{{ addressData.address }}</text>
								<text class="address-guide u-iconfont uicon-arrow-right"
									style="color: #999"></text>
							</view>
							<view class="address-location u-flex-col u-col-center">
								<image class="location-img"
									:src="$IMG_URL + '/imgs/order/e2.png'"
									mode=""></image>
								<text class="location-text">商家配送</text>
							</view>
						</view>
						<view class="express-content u-flex">
							<view class="time-box">
								<view class="box-title u-m-b-20">配送时间</view>
								<view class="box-content u-flex"
									@tap="checkExpressTime('store')">
									<text class="box-text">{{ checkTime[checkDayCur].title
                    }}{{ checkTime[checkDayCur].timeRange[checkTimeCur] }}</text>
									<text class="u-iconfont uicon-arrow-right"
										style="color: #999"></text>
								</view>
							</view>
							<view class="box-line"></view>
							<view class="phone-box">
								<view class="box-title u-m-b-20">预留电话</view>
								<view class="box-content u-flex">
									<view class="box-content u-flex"
										style="width: 340rpx">
										<u-input placeholder="请输入预留电话"
											placeholderStyle="font-size:24rpx"
											border
											height="40"
											:focus="getFocus"
											v-model="selfPhone"
											type="number"></u-input>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 自动发货 -->
					<view class="express-address"
						v-if="expressTypeCur == 'autosend'">
						<view class="express-top u-flex u-row-between">
							<text class="dispatch-notice">订单支付完成后，请在订单详情页查看发货信息</text>
							<view class="address-location u-flex-col u-col-center">
								<image class="location-img"
									:src="$IMG_URL + '/imgs/order/e3.png'"
									mode=""></image>
								<text class="location-text">自动发货</text>
							</view>
						</view>
					</view>
				</view>
				<view class="express-type__bottom u-flex u-row-between u-p-b-20"
					v-show="
            expressTypeCur !== 'selfetch' ||
            (expressTypeCur == 'selfetch' && lat)
          ">
					<button class="u-reset-button cancel-btn"
						@tap="hideExpressType"> 取消 </button>
					<button class="u-reset-button save-btn"
						@tap="saveExpressType"> 确定 </button>
				</view>
			</view>
		</u-popup>
		<!-- 配送时间弹窗 -->
		<u-popup v-model="showCheckTime"
			mode="bottom"
			safe-area-inset-bottom
			:closeable="true"
			close-icon-pos="top-right"
			border-radius="20">
			<view class="checkTime-box page_box">
				<view class="checkTime-head">选择{{ checkType }}时间</view>
				<view class="checkTime-content content_box u-flex">
					<view class="checkTime-content__left">
						<view v-for="(day, index) in checkTime"
							:key="day.value"
							class="left-item u-flex u-row-center u-col-center"
							@tap="check('day', index)"
							:class="{ 'item--active': checkDayCur == index }">
							{{ day.title }}
						</view>
					</view>
					<scroll-view class="checkTime-content__right scroll-box"
						:scroll-into-view="'c' + checkTimeId"
						scroll-y
						scroll-with-animation>
						<view v-if="checkTime[checkDayCur].timeRange.length > 0">
							<view v-for="(time, index) in checkTime[checkDayCur].timeRange"
								:key="time"
								class="right-item"
								:id="'c' + time.split(':')[0]"
								@tap="check('time', index)"
								:class="{ 'item--active': checkTimeCur == index }">
								<view>{{ time }}</view>
							</view>
						</view>
						<view v-else
							class="right-item-none">请选择其它日期</view>
					</scroll-view>
				</view>
				<view class="checkTime-foot u-flex u-row-center u-col-center"><button class="u-reset-button save-btn"
						@tap="showCheckTime = false"> 保存并使用 </button></view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import shSelectCoupon from "./components/sh-select-coupon.vue";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import Auth from "@/shopro/permission/index.js";
	export default {
		components: {
			shSelectCoupon,
		},
		data() {
			return {
				platform: this.$platform.get(),
				totalNum: 0,
				couponList: [], //优惠券列表
				addressData: {}, //收货地址
				addressId: 0, //收货地址ID
				customStyle: {
					//自定义按钮样式
					width: "210rpx",
					lineHeight: "70rpx",
					background: "linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1))",
					boxShadow: " 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22)",
					borderRadius: "100rpx",
					fontSize: "28rpx",
					border: "none",
					color: "#fff",
					margin: "0",
				},
				isDisabled: false, //提交
				showCheckTime: false, //配送时间弹窗。
				checkTime: {}, //配送时间数据
				showExpressType: false, //配送方式弹窗
				expressTypeMap: {
					express: "物流快递",
					selfetch: "到店/自提",
					store: "商家配送",
					autosend: "自动发货",
				},
				expressType: [
					//配送方式
					{
						id: "e1",
						title: "物流快递",
						value: "express",
					}, {
						id: "e2",
						title: "到店/自提",
						value: "selfetch",
					}, {
						id: "e3",
						title: "商家配送",
						value: "store",
					}, {
						id: "e4",
						title: "自动发货",
						value: "autosend",
					},
				],
				storeList: [], //门店列表
				storeInfo: {
					id: 0,
					name: "",
					dispatch_text: "",
				}, //自提点商家信息
				from: "",
				orderType: "",
				grouponBuyType: "alone",
				grouponId: 0,
				goodsList: [], //传递过来的参数
				perGoodsList: {}, //确认单订单商品
				currentGoodsId: 0, //当前商品id.
				currentSkuId: 0, //商品的规格ID
				remark: "",
				orderPre: {},
				couponId: 0,
				couponPrice: "选择优惠券",
				expressTypeCur: "",
				inExpressType: [], //当前商品支持的配送方式。
				isProtocol: true, //自提协议。
				selfPhone: "", //编辑手机号
				getFocus: false, //获取焦点。
				checkType: "自提",
				checkTimeCur: 0, //默认选中时间。
				checkTimeId: "c1", //锚点用
				checkDayCur: 0, //默认日期
				lat: 0, //地理位置
				lng: 0,
				showInvoice: false, //申请发票
				invoiceType: "person",
				selectedInvoice: "不开具发票",
				invoiceForm: {
					model: {
						header_name: "",
						mobile: "",
						tax_no: "",
						type: "person",
					},
					rules: {
						mobile: [{
							required: true,
							message: "请输入手机号",
							trigger: ["change", "blur"],
						}, {
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						}, ],
						header_name: [{
							required: true,
							message: "请填写名称",
							trigger: ["change", "blur"],
						}, ],
					},
				},
				areaList: [],
				numberList: [],
				is_name: 0,
				is_phone: 0,
				is_mobile: 0,
				is_hostel: 0,
				areaCurrent: -1,
				numberCurrent: -1,
				realname: '',
				phone: '',
				floor: '',
				room: ''
			};
		},
		computed: {
			...mapGetters(["initStore"]),
			expressClass() {
				let cl = "head-nav--active";
				const {
					expressType,
					expressTypeCur
				} = this;
				if (expressTypeCur === 0) {
					cl = "head-nav__left--active";
				}
				if (expressTypeCur === expressType.length - 1) {
					cl = "head-nav__right--active";
				}
				return cl;
			},
			// 是否可以使用优惠券
			hasCoupons() {
				if (this.couponList.length && !this.orderPre.activity_type) {
					return true;
				}
				return Boolean(this.couponList.length && this.orderPre.activity_type && this.orderPre.activity_type
					.indexOf("groupon") === -1 && this.orderPre.activity_type.indexOf("seckill") === -1 && this
					.orderType !== "score");
			},
		},
		onShow() {
			// 监听选择自提点
			uni.$once("SELECT_STORE", (res) => {
				this.storeInfo = JSON.parse(res.storeInfo);
			});
			// 监听地址
			uni.$on("SELECT_ADDRESS", (res) => {
				if (res.addressData) {
					this.addressData = JSON.parse(res.addressData);
					this.addressId = this.addressData.id;
				} else {
					this.addressId = 0;
				}
				this.getPre();
				res.addressData && uni.$off("SELECT_ADDRESS");
			});
		},
		async onLoad() {
			this.goodsList = this.$Route.query.goodsList;
			this.from = this.$Route.query.from;
			this.orderType = this.$Route.query.orderType;
			this.grouponBuyType = this.$Route.query.grouponBuyType;
			this.grouponId = this.$Route.query.grouponId;
			await this.init();
		},
		methods: {
			...mapActions(["getCartList"]),
			numberChange(e) {
				this.numberCurrent = e.detail.value
			},
			areaChange(e) {
				if (this.areaList.length) {
					this.areaCurrent = e.detail.value
					this.numberList = this.areaList[this.areaCurrent].number_list
					this.numberCurrent = -1
				}
			},
			// 切换发票类型
			changeInvoiceType(type) {
				this.invoiceType = type;
				this.invoiceForm.model.type = type;
			},
			// 点击开发票
			onInvoice() {
				this.showInvoice = !this.showInvoice;
				this.$nextTick(() => {
					if (this.showInvoice) {
						this.invoiceForm.model.type = "person";
						this.$refs.invoiceRef.setRules(this.invoiceForm.rules);
					}
				});
			},
			// 发票确认取消
			cancelInvoice() {
				this.selectedInvoice = "不开具发票";
				Object.keys(this.invoiceForm.model).map(
					(key) => (this.invoiceForm.model[key] = ""));
				this.showInvoice = false;
			},
			saveInvoice() {
				this.$refs.invoiceRef.validate((valid) => {
					if (valid) {
						if (this.invoiceType === "company" && !this.invoiceForm.model.tax_no) {
							this.$u.toast("请输入纳税人识别号");
						}
						this.selectedInvoice = this.invoiceForm.model.header_name;
						this.showInvoice = false;
					}
				});
			},
			// 初始化
			init() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				return Promise.all([
					this.getDefaultAddress(),
					this.initDate(),
					this.getCoupons(),
				]).then(() => {
					uni.hideLoading();
				});
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas,
				});
			},
			// 格式化选择时间
			initDate() {
				const weekRange = {
					0: "周日",
					1: "周一",
					2: "周二",
					3: "周三",
					4: "周四",
					5: "周五",
					6: "周六",
				};
				const timeRange = ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00",
					"17:00", "18:00", "19:00",
				];
				let now = new Date().getTime();
				let today = this.$u.timeFormat(now);
				let tomorrow = this.$u.timeFormat(now + 86400000);
				let aftertomorrow = this.$u.timeFormat(now + 172800000);
				let week1 = weekRange[new Date().getDay()];
				let week2 = weekRange[new Date(now + 86400000).getDay()];
				let week3 = weekRange[new Date(now + 172800000).getDay()];

				function getTimeRange() {
					const nowHours = new Date().getHours();
					return timeRange.filter((item) => item.split(":")[0] > nowHours);
				}
				const selectDays = [{
					title: "今天（" + week1 + "）",
					value: today,
					timeRange: getTimeRange(),
				}, {
					title: "明天（" + week2 + "）",
					value: tomorrow,
					timeRange,
				}, {
					title: "后天（" + week3 + "）",
					value: aftertomorrow,
					timeRange,
				}, ];
				if (selectDays[0].timeRange.length === 0) {
					selectDays.shift();
				}
				this.checkTime = selectDays;
			},
			// 格式日期
			check(type, index) {
				if (type == "day") {
					this.checkDayCur = index;
				}
				if (type == "time") {
					this.checkTimeCur = index;
					this.checkTimeId = this.checkTime[this.checkDayCur].timeRange[index].split(":")[0];
				}
			},
			// 获取当前商品配送方式
			getCurGoodsExpress(goods) {
				for (let item of this.goodsList) {
					if (item.goods_id == goods.goods_id && goods.sku_price_id == item.sku_price_id) {
						return this.expressTypeMap[item.dispatch_type];
					}
				}
			},
			// 获取位置
			async getLocation() {
				let authState = await new Auth("userLocation").check();
				// #ifdef MP ||　APP-VUE
				authState && uni.getLocation({
					type: "gcj02",
					success: (res) => {
						this.lng = res.longitude;
						this.lat = res.latitude;
						this.getStoreAddress();
					},
					fail: (err) => {
						console.log("确认订单自提位置：", err);
					},
				});
				// #endif
				// #ifdef H5
				uni.getLocation({
					type: "gcj02",
					success: (res) => {
						this.lng = res.longitude;
						this.lat = res.latitude;
						this.getStoreAddress();
					},
				});
				// #endif
			},
			// 获取商品支持的自提点。
			getStoreAddress() {
				let that = this;
				that.$http("goods.storeAddress", {
					id: that.currentGoodsId,
					latitude: that.lat,
					longitude: that.lng,
				}).then((res) => {
					if (res.code == 1) {
						that.storeInfo = res.data.data[0];
						that.storeList = res.data.data;
					}
				});
			},
			// 订单信息
			getPre() {
				let that = this;
				that.$http("order.pre", {
					goods_list: that.goodsList,
					from: that.from,
					address_id: that.addressId,
					coupons_id: that.couponId,
					order_type: that.orderType,
					buy_type: that.grouponBuyType,
					groupon_id: that.grouponId,
				}).then((res) => {
					if (res.data) {
						that.areaList = res.data.area_list
						that.orderPre = res.data;
						that.perGoodsList = res.data.new_goods_list;
						that.totalNum = 0;
						that.perGoodsList.map((item) => {
							that.is_name = item.detail.is_name
							that.is_mobile = item.detail.is_mobile
							that.is_phone = item.detail.is_phone
							that.is_hostel = item.detail.is_hostel
							item.selType = item.dispatch_type;
							that.totalNum += item.goods_num;
							that.goodsList.forEach((goods) => {
								if (item.goods_id == goods.goods_id && item.sku_price_id == goods
									.sku_price_id) {
									goods.dispatch_type = item.dispatch_type;
									if (item.store_id) {
										goods.store_id = item.store_id;
									}
								}
							});
						});
					}
				});
			},
			// 提交订单
			subOrder() {
				let that = this;
				if (!this.realname && this.is_name) {
					this.$u.toast("请填写姓名");
					return false
				}
				if (!this.phone && this.is_phone) {
					this.$u.toast("请填写联系电话");
					return false
				}
				if (this.is_mobile) {
					if (this.areaCurrent === -1) {
						this.$u.toast("请选择号码归属地");
						return false
					}
					if (this.numberCurrent === -1) {
						this.$u.toast("请选择手机号码");
						return false
					}
				}
				if (this.is_hostel) {
					if (!this.floor) {
						this.$u.toast("请填写楼层信息");
						return false
					}
					if (!this.room) {
						this.$u.toast("请填写具体房号");
						return false
					}
				}
				that.isDisabled = true;
				let spm = uni.getStorageSync('spm') || '';
				that.$http("order.createOrder", {
					goods_list: that.goodsList,
					from: that.from,
					address_id: that.addressId,
					coupons_id: that.couponId,
					remark: that.remark,
					order_type: that.orderType,
					buy_type: that.grouponBuyType,
					groupon_id: that.grouponId,
					invoice: Number(that.orderPre.invoice_amount) && that.selectedInvoice !== "不开具发票" ? {
						...that.invoiceForm.model,
						amount: that.orderPre.invoice_amount,
					} : {},
					phone: this.phone,
					realname: this.realname,
					number: this.numberCurrent !== -1 ? this.numberList[this.numberCurrent].number : '',
					number_area: this.areaCurrent !== -1 ? this.areaList[this.areaCurrent].name : '',
					floor: this.floor,
					room: this.room,
					spm
				}, "提交中...").then((res) => {
					that.isDisabled = false;
					if (res.code === 1) {
						that.getCartList();
						that.$Router.replace({
							path: res.data.status > 0 ?
								`/pages/order/payment/result` : `/pages/order/payment/method`,
							query: {
								orderId: res.data.id,
								payState: res.data.status > 0 ? "success" : "paying",
								orderType: "goods",
							},
						});
					}
				});
			},
			// 初始地址
			getDefaultAddress() {
				this.$http("address.defaults", {}, "", false).then((res) => {
					if (res.code === 1 && res.data) {
						this.addressData = res.data;
						this.addressId = res.data.id;
					}
					this.getPre();
				});
			},
			// 可用优惠券
			getCoupons() {
				let that = this;
				that.$http("order.coupons", {
					goods_list: that.goodsList,
					from: that.from,
					address_id: that.addressId,
					coupons_id: that.couponId,
					order_type: that.orderType,
				}).then((res) => {
					if (res.code === 1) {
						that.couponList = res.data;
					}
				});
			},
			// 选择优惠券
			selectCoupon(index) {
				this.couponId = index >= 0 ? this.couponList[index].user_coupons_id : 0;
				this.getPre();
			},
			// 显示配送方式弹窗
			async onSelExpressType(goods) {
				this.showExpressType = true;
				this.inExpressType = goods.detail.dispatch_type_arr;
				this.currentGoodsId = goods.goods_id;
				this.currentSkuId = goods.sku_price_id;
				this.goodsList.forEach((item) => {
					if (item.goods_id == this.currentGoodsId && this.currentSkuId == item.sku_price_id) {
						this.expressTypeCur = item.dispatch_type;
						this.selfPhone = item.dispatch_phone ? item.dispatch_phone : this.addressData && this
							.addressData.phone;
						this.checkDayCur = item.checkDayCur ? item.checkDayCur : 0;
						this.checkTimeCur = item.checkTimeCur ? item.checkTimeCur : 0;
						if (this.expressTypeCur == "selfetch") {
							!this.lat && this.getLocation();
							this.storeList.forEach((store) => {
								if (item.store_id == store.id) {
									this.storeInfo = store;
								}
							});
							this.selfPhone = item.dispatch_phone ? item.dispatch_phone : this.addressData &&
								this.addressData.phone;
						}
					}
				});
			},
			// 关闭配送方式弹窗
			hideExpressType() {
				this.showExpressType = false;
				this.changeGoodsList();
			},
			// 保存配送方式
			saveExpressType() {
				if (this.expressTypeCur === "selfetch") {
					if (!this.storeInfo) {
						this.$u.toast("暂无自提点，请选择其他配送方式");
						return false;
					}
					if (!this.isProtocol) {
						this.$u.toast("请先勾选门店协议");
						return false;
					}
				}
				this.showExpressType = false;
				this.changeGoodsList();
				this.getPre();
			},
			// 更改提交数据
			changeGoodsList() {
				this.goodsList.forEach((goods) => {
					if (goods.goods_id == this.currentGoodsId && this.currentSkuId == goods.sku_price_id) {
						goods.dispatch_type = this.expressTypeCur;
						goods.dispatch_phone = this.selfPhone;
						goods.dispatch_date = this.checkTime[this.checkDayCur].value + " " + this.checkTime[this
							.checkDayCur].timeRange[this.checkTimeCur] + ":00";
						if (this.expressTypeCur == "selfetch") {
							if (!this.storeInfo) {
								this.$u.toast("暂无自提点，请选择其他配送方式");
								return false;
							}
							goods.store_id = this.storeInfo.id;
						}
						goods.checkDayCur = this.checkDayCur;
						goods.checkTimeCur = this.checkTimeCur;
					}
				});
			},
			// 选择快递方式
			changeExpressType(cur) {
				this.expressTypeCur = cur;
				this.getFocus = false;
				cur === "selfetch" && !this.lat && this.getLocation();
			},
			// 是否同意协议
			checkProtocol() {
				this.isProtocol = !this.isProtocol;
			},
			// 选择配送时间
			checkExpressTime(type) {
				switch (type) {
					case "store":
						this.checkType = "配送";
						break;
					case "selfetch":
						this.checkType = "自提";
						break;
					default:
						this.checkType = "自提";
				}
				this.showCheckTime = !this.showCheckTime;
			},
		},
	};
</script>
<style lang="scss"
	scoped>
	// 发票弹窗
	.invoice-modal {
		width: 750rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		height: 700rpx;
		overflow: visible;

		.invoice-foot {
			.price-title {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.price-num {
				font-size: 28rpx;
				font-weight: 500;
				color: #eab662;
			}

			.cancel-btn {
				width: 335rpx;
				line-height: 74rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 37rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.save-btn {
				width: 335rpx;
				line-height: 74rpx;
				background: linear-gradient(90deg,
						rgba(233, 180, 97, 1),
						rgba(238, 204, 137, 1));
				border-radius: 37rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.invoice-head {
			width: 100%;
			height: 80rpx;
			background: #f8e3bd;
			border-radius: 20rpx 20rpx 0 0;

			.head-nav {
				width: (750rpx/2);
				position: relative;
				height: 100%;
			}

			.nav-title {
				font-size: 24rpx;
				font-weight: 500;
				color: #666;
				position: relative;
				z-index: 6;
			}

			.nav-title--active {
				color: #a8700d;
				font-size: 26rpx;
			}

			.head-nav--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::after {
					content: "";
					display: block;
					width: 40rpx;
					height: 80rpx;
					position: absolute;
					transform: skewX(20deg);
					background: #fff;
					border-top-right-radius: 20rpx;
					top: 0;
					right: -15rpx;
				}

				&::before {
					content: "";
					display: block;
					width: 40rpx;
					height: 80rpx;
					position: absolute;
					transform: skewX(-20deg);
					background: #fff;
					border-top-left-radius: 20rpx;
					top: 0;
					left: -15rpx;
				}
			}
		}
	}

	// 收货地址栏
	.head_box {
		background-color: #fff;
	}

	.add-address-box {
		min-height: 100rpx;
		background: url($IMG_URL + "/imgs/order/order_address_line.png") no-repeat;
		background-size: 100% auto;
		background-position: bottom center;

		.select-notice {
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 40rpx;
		}

		.name,
		.phone {
			font-size: 30rpx;
			font-weight: 500;
		}

		.phone {
			margin: 0 20rpx;
		}

		.tag {
			background: rgba(233, 191, 113, 0.2);
			border-radius: 6rpx;
			padding: 0 16rpx;
			line-height: 38rpx;
			color: #a8700d;
			font-size: 22rpx;
		}

		.detail {
			.address {
				margin-top: 25rpx;
				width: 543rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 40rpx;
			}
		}
	}

	// 备注
	.remark-box {
		margin-top: 20rpx;
		background: #fff;
		padding: 25rpx;

		.item-input {
			flex: 1;
			text-align: end;
			font-size: 28rpx;
		}

		.input-pl {
			color: #c4c4c4;
		}
	}

	// 商品卡片
	.goods-list {
		background: #fff;
		margin-top: 20rpx;

		.goods-card {
			min-height: 200rpx;

			.goods-price {
				font-size: 30rpx;
				font-weight: 500;
				width: 480rpx;
				color: #333333;

				.goods-num {
					font-size: 28rpx;
					color: #c4c4c4;
				}
			}

			.order-sku {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				width: 440rpx;
				margin-bottom: 20rpx;

				.order-num {
					margin-right: 10rpx;
				}
			}
		}
	}

	.item-list {
		height: 100rpx;
		background: #fff;
		padding: 0 25rpx;

		.item-title {
			font-size: 28rpx;
			margin-right: 20rpx;

			.activity-title {
				font-size: 26rpx;
				color: #999;
			}
		}

		.detail {
			font-size: 28rpx;
			color: #333;
		}

		.origin-price {
			font-size: 26rpx;
			color: #666;
			text-decoration: line-through;
		}

		.price {
			font-size: 26rpx;
			color: #ff0000;
			margin-right: 40rpx;
		}

		.sel-coupon {
			font-size: 26rpx;
			color: #c4c4c4;
			margin-right: 20rpx;
		}
	}

	.logistic,
	.price-box,
	.remark-box,
	.score,
	.coupon {
		border-top: 1rpx solid rgba(#dfdfdf, 0.5);
	}

	.border-top {
		border-top: 1rpx solid rgba(#dfdfdf, 0.5);
	}

	.foot-box-wrap {
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		position: relative;
		width: 100%;
		z-index: 70;
	}

	.foot-box {
		position: fixed;
		display: flex;
		align-items: center;
		width: 100%;
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		border-top: 1rpx solid #eeeeee;
		background-color: #fff;
		z-index: 998;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		padding: 0 30rpx;

		.btn-hover {
			color: #fff;
		}

		.num {
			font-size: 26rpx;
			color: #999;
		}

		.all-money {
			margin: 0 60rpx 0 20rpx;

			.price {
				color: #ff0000;
			}
		}

		.sub-btn {
			width: 210rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg,
					rgba(233, 180, 97, 1),
					rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	// 弹窗之配送方式
	// 配送方式
	.express-type {
		width: 750rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		height: 700rpx;
		overflow: visible;

		.express-type__head {
			width: 100%;
			height: 80rpx;
			background: #f8e3bd;
			border-radius: 20rpx 20rpx 0 0;

			&-nav {
				width: (750rpx/4);
				position: relative;
				height: 100%;
			}

			.head-nav--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::after {
					content: "";
					display: block;
					width: 40rpx;
					height: 80rpx;
					position: absolute;
					transform: skewX(20deg);
					background: #fff;
					border-top-right-radius: 20rpx;
					top: 0;
					right: -15rpx;
				}

				&::before {
					content: "";
					display: block;
					width: 40rpx;
					height: 80rpx;
					position: absolute;
					transform: skewX(-20deg);
					background: #fff;
					border-top-left-radius: 20rpx;
					top: 0;
					left: -15rpx;
				}
			}

			.head-nav__left--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 74rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::after {
					content: "";
					display: block;
					width: 40rpx;
					height: 74rpx;
					position: absolute;
					transform: skewX(20deg);
					background: #fff;
					border-top-right-radius: 20rpx;
					top: 0;
					right: -15rpx;
				}
			}

			.head-nav__right--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 74rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::before {
					content: "";
					display: block;
					width: 40rpx;
					height: 74rpx;
					position: absolute;
					transform: skewX(-20deg);
					background: #fff;
					border-top-left-radius: 20rpx;
					top: 0;
					left: -15rpx;
				}
			}

			.head-nav__title {
				font-size: 24rpx;
				font-weight: 500;
				color: #666;
				position: relative;
				z-index: 6;
			}

			.head-nav__title--active {
				color: #a8700d;
				font-size: 26rpx;
			}
		}

		.express-type__content {
			.empty-address {
				height: 120rpx;
				padding: 0 25rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			// 无定位
			.location-box {
				height: 500rpx;
				justify-content: center;

				.nolocation-img {
					width: 74rpx;
					height: 90rpx;
					margin-bottom: 40rpx;
				}

				.location-title {
					font-size: 35rpx;
					font-weight: bold;
					color: rgba(70, 53, 27, 1);
					margin-bottom: 20rpx;
				}

				.location-tip {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					margin-bottom: 40rpx;
				}

				.open-location {
					width: 492rpx;
					line-height: 70rpx;
					background: linear-gradient(90deg,
							rgba(233, 180, 97, 1),
							rgba(238, 204, 137, 1));
					box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
					border-radius: 35rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}
			}

			// 快递
			.express-address {
				position: relative;
				padding: 30rpx 25rpx;
				background: url($IMG_URL + "/imgs/order/address_bg.png") no-repeat;
				background-size: 430rpx 300rpx;
				background-position: top right;

				.express-top {
					margin-bottom: 20rpx;
					width: 550rpx;
					text-align: left;

					.address {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 40rpx;
						text-align: left;
					}

					.dispatch-notice {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 40rpx;
						text-align: left;
					}

					.address-location {
						position: absolute;
						right: 60rpx;
						top: 30rpx;

						.location-img {
							width: 80rpx;
							height: 90rpx;
						}

						.location-text {
							font-size: 18rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
						}
					}

					.tag {
						background: rgba(233, 191, 113, 0.2);
						border-radius: 6rpx;
						padding: 0 16rpx;
						line-height: 38rpx;
						color: #a8700d;
						font-size: 22rpx;
						margin-right: 20rpx;
					}

					.tag1 {
						background: rgba(53, 190, 105, 0.2);
						border-radius: 6rpx;
						padding: 0 16rpx;
						line-height: 38rpx;
						color: #1bbc50;
						font-size: 22rpx;
						margin-right: 20rpx;
					}

					.address-guide {
						position: absolute;
						right: 25rpx;
						top: 40rpx;
						color: #999999;
					}
				}

				.express-content {
					margin-bottom: 20rpx;

					.box-line {
						width: 1rpx;
						height: 61rpx;
						border-left: 1rpx solid rgba(238, 238, 238, 1);
						margin: 0 40rpx;
					}

					.phone-box1 {

						.name,
						.phone {
							font-size: 26rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
						}

						.phone {
							margin-left: 20rpx;
						}
					}

					.time-box,
					.phone-box {
						text-align: left;
						min-height: 120rpx;

						.box-title {
							font-size: 24rpx;
							font-weight: 400;
							color: #666;
							padding-bottom: 10rpx;
						}

						.box-text {
							font-size: 24rpx;
							font-weight: 500;
							color: #333;
						}

						.edit-phone {
							width: 160rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #333;
						}

						.box-icon {
							font-size: 28rpx;
							color: #999;
							display: inline-block;
							width: 40rpx;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}

				.express-bottom {
					.protocol {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);

						.protocol-text {
							color: #6487a4;
						}
					}
				}
			}
		}

		.express-type__bottom {
			height: 90rpx;
			padding: 0 30rpx;

			.cancel-btn {
				width: 335rpx;
				line-height: 74rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 37rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.save-btn {
				width: 335rpx;
				line-height: 74rpx;
				background: linear-gradient(90deg,
						rgba(233, 180, 97, 1),
						rgba(238, 204, 137, 1));
				border-radius: 37rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	// 选择配送给时间
	.checkTime-box {
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx 20rpx 0px 0px;
		height: 720rpx;
		text-align: center;

		.checkTime-head {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 100rpx;
			position: relative;
		}

		.checkTime-foot {
			height: 100rpx;

			.save-btn {
				width: 690rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg,
						rgba(240, 199, 133, 1),
						rgba(246, 214, 157, 1));
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

		.checkTime-content {
			.checkTime-content__left {
				height: 100%;
				width: 190rpx;
				background: #f5f5f5;

				.left-item {
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					height: 100rpx;
					width: 100%;
				}
			}

			.checkTime-content__right {
				flex: 1;
				height: 100%;
				overflow-y: auto;

				.right-item {
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					width: 100%;
					text-align: center;
					border-bottom: 1rpx solid rgba(#dfdfdf, 0.6);
					margin: 0 30rpx;
					line-height: 100rpx;
				}

				.right-item-none {
					font-size: 32rpx;
					font-weight: 500;
					color: #999999;
					width: 100%;
					text-align: center;
					margin-top: 200rpx;
				}
			}

			.item--active {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(168, 112, 13, 1) !important;
				background-color: #fff;
			}
		}
	}
</style>